<template>
  <div class='calendar'>
    <ul class='calendar-title border-bottom'>
      <li @click="goTicket">门票</li>
      <li  @click="goTourist">一日游</li>
    </ul>
    <div  class='calendar-item' ref="heaven" v-for="(calendar,index) in calendarInfo">
      <h3 class='border-bottom'>{{calendar.calendarInfo.title}}</h3>
      <div class="calendar-info border-bottom"  v-for="(result,i) in calendar.calendarInfo.result">
        <div class="calendar-left">
          <h4 class="calendar-title">{{result.subtitle}}</h4>
        </div>
        <div class="calendar-right" @click="open(result.isShow,index,i)">
          <span>
						¥{{result.price}}
						<i class='iconfont icon-jiantouxiangxia' ></i>
					</span>
        </div>
				<!-- 扩展 -->
				<div class='recommend'>
				  <div class="recommend-info border-bottom" v-show="result.isShow" v-for="item in result.recommendInfo">
				    <div class="recommend-left">
				      <h4 class="recommend-title">{{item.title}}</h4>
				      <p>{{item.time}}</p>
				      <span class='border'>随时退</span>
				    </div>
				    <div class="recommend-right">
				      <span >¥{{item.price}}</span>
				      <div class='recommend-button'>{{item.type}}</div>
				    </div>
				  </div>
				</div>
        <!-- <detail-recommend ></detail-recommend> -->
      </div>
    </div>
  </div>
</template>
<script>

export default {
	name:'LikeCalendar',
	props:['calendarInfo'],
	data(){
		return {
			isShow: false
		}
	},
	methods:{
		open(isShow,index,i){
			let a = this.calendarInfo[index].calendarInfo.result[i]
			a.isShow = !a.isShow
		},
		goTicket(){
		  console.log(this.$refs.heaven[0].offsetTop)
		  document.documentElement.scrollTop = this.$refs.heaven[0].offsetTop-85
		},
		goTourist(){
			// 定位到相应的scrollTop值
		  console.log(this.$refs.heaven[2].offsetTop)
		  document.documentElement.scrollTop = this.$refs.heaven[2].offsetTop-43
		}
	}
}
</script>

<style lang='stylus' scoped>
  .calendar .recommend>>> .recommend
    width:100%
  .calendar .recommend>>> .recommend-title
    line-height:.4rem
  .border-bottom
    &::before
      border-color:#ccc
  .calendar
    .recommend
      background-color:#f5f5f5
    .calendar-item
      padding:0 .2rem
      border-bottom:.2rem solid #f5f5f5
    .calendar-title
      display:flex
      li
        width:50%
        height:1rem
        line-height:1rem
        text-align:center
        font-size:.3rem
    h3
      line-height:1rem
      font-size:.32rem
    .calendar-info
      display:flex
      flex-wrap: wrap
      justify-content:space-between
      padding: .1rem 0
      .calendar-left
        width:6rem
        color:#616161
        h4
          display: -webkit-box
          overflow:hidden
          line-height:.6rem
          font-size:.28rem
          -webkit-line-clamp: 2
          -webkit-box-orient: vertical
        p
          line-height:.5rem
          font-size:.28rem
        span
          color:#00afc7
          font-size:.24rem
      .calendar-right
        display:flex
        flex-direction:column
        justify-content:center
        width:1.8rem
        text-align:center
        span
          color:#ff9852
          font-size:.35rem
          font-weight:400
          &::first-letter
            font-size:.24rem
          i
            position:absolute
            font-size:.24rem
            color:#bbb
.border
    &::before
      border-color:#a5e4ec
  .border-bottom
    &::before
      border-color:#ddd
  .recommend
    padding:0 .2rem
    border-bottom:.2rem solid #f5f5f5
  h3
    line-height:1rem
    font-size:.32rem
  .recommend-info
    display:flex
    justify-content:space-between
    padding:.2rem 0
    .recommend-left
      width:5.72rem
      color:#616161
      h4
        display: -webkit-box
        overflow:hidden
        line-height:.6rem
        font-size:.3rem
        -webkit-line-clamp: 2
        -webkit-box-orient: vertical
      p
        line-height:.5rem
        font-size:.28rem
      span
        color:#00afc7
        font-size:.24rem
    .recommend-right
      display:flex
      flex-direction:column
      justify-content:center
      width:1.8rem
      text-align:center
      span
        color:#ff9852
        font-size:.35rem
        font-weight:400
      .recommend-button
        height:.6rem
        color:#fff
        background-image: linear-gradient(130deg,#ffab1e 37%,#ff8c12 100%)
        line-height:.6rem
        border-radius:.1rem

</style>
